<template>
	<view class="login-password-forget-second">
		<view class="login-password-forget-second-body">
			<view class="login-password-forget-second-content">
				<view class="forget-user-teloremail">
					已向<view class="user-send-data">
						<text style="color: rgb(227, 64, 50)" >{{replaceData}}</text>
					</view>发送验证码
				</view>
				
				<view class="forget-send-verification-code">
					<view class="forget-send-verification-content">
						<view class="input-code">
							<input type="number" value="" placeholder="短信验证码"/>
						</view>
						<view class="send-btn">
							<button type="warn">重新获取</button>
						</view>
					</view>
				</view>
				
				<!-- 有时间封装成组件 -->
				<view class="change-password-box change-top">
					<view class="change-password-title">
						<text>新密码</text>
					</view>
					<view class="login-password-bottom">
						<view class="user-tel">
							<input :type="eyeflag?'text':'password'" placeholder="请输入密码" placeholder-class="plc">
						</view>
						<view class="login-password-eye" @click="changeEye()">
							<image  mode="heightFix" :src="eyeflag?'../../../static/images/eye.png':'../../../static/images/eye-hidden.png'" class="changeEye"></image>
						</view>
					</view>
				</view>
				
				<view class="change-password-box">
					<view class="login-password-bottom">
						<view class="user-tel">
							<input :type="eyeflagbot?'text':'password'" placeholder="请输入密码" placeholder-class="plc">
						</view>
						<view class="login-password-eye" @click="changeEyebot()">
							<image  mode="heightFix" :src="eyeflagbot?'../../../static/images/eye.png':'../../../static/images/eye-hidden.png'" class="changeEye"></image>
						</view>
					</view>
				</view>
				
				
				<view class="prompt-box">
					<view class="prompt-logo">
						<image src="../../../static/images/notice.png" mode="heightFix"></image>
					</view>
					<view class="prompt-content">
						<text>长度限制8-20位,不能是纯数字或者纯字母</text>
					</view>
				</view>
				
				<view class="check-box">
					<button type="warn" @click="backToLogin()">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

	import { ref,onMounted } from 'vue'
	import replaceTelOrEmail from '@/utils/fliter/replaceTelOrEmail.js'
	import { onLoad } from '@dcloudio/uni-app';
	//接受上个页面的传值
		const userteloremail = ref("")
		const replaceData = ref("")
		onLoad((options) => {
			userteloremail.value = options.data
			replaceData.value = replaceTelOrEmail(userteloremail.value)
		});	
	// const replaceData = replaceTelOrEmail(userteloremail.value)
	const eyeflag = ref(false)
	const eyeflagbot = ref(false)
	const changeEye = () =>{
		eyeflag.value = !eyeflag.value
		// console.log(eyeflag.value);
	}
	
	const changeEyebot = () =>{
		eyeflagbot.value = !eyeflagbot.value
	}
	
	const backToLogin = () =>{
		uni.navigateBack({
			animationDuration:2000,
			animationType:'fade-out',
			delta:3
		})
	}
	
	// const props =  defineProps()
	// console.log(props.data);
</script>

<style lang="scss" scoped>
	
	body{
		background-color: #f9f9f9;
		// overflow-y:hidden;
	}
	
	uni-image{
		height: 40rpx;
	}
	
	.plc{
		color: #e1e1e1;
	}
	
	button::after{
		border:0;
	}
	
	uni-button[type='warn']{
		background-color: #1aa034;
		font-size: 30rpx;
		color: rgba(255,255,255,1);
		width: 100%;
	}
	
	uni-button[type='default']{
		background-color: rgb(203, 203, 203);
		color: rgba(255,255,255,1);
		width: 100%;
	}
	
	
.login-password-forget-second-body{
	width: 100%;
	display: flex;
	justify-content: center;
	>.login-password-forget-second-content{
		width: 90%;
		// border: 1px black solid;
		display: flex;
		flex-direction: column;
		justify-content: center;
		>.forget-user-teloremail{
			display: flex;
			font-size: 35rpx;
			font-weight: 600;
		}
		>.forget-send-verification-code{
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
			>.forget-send-verification-content{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>.send-btn{
					// height: 100%;
					width: 250rpx;
				}
				>.input-code{
					
				}
			}
		}
		
		
		>.change-password-box{
			>.change-password-title{
				font-size: 34rpx;
				font-weight: 600;
				margin-bottom: 35rpx;
			}
			
			>.login-password-bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				border-bottom: 1rpx #cbcbca dotted;
				>.user-tel{
					font-weight: 600;
					width: 500rpx;
				}
				>.login-password-eye{
					font-weight: 600;
					height: 100%;
				}
			}
		}
		
		.change-top{
			margin-top:60rpx;
		}
		
		
		>.prompt-box{
			// margin-top: 10rpx;
			display: flex;
			color: #cbcbca;
		}
		
		>.check-box{
			margin-top: 65rpx;
		}
	}
}
</style>
